<template>
    <div class="page-common-layout">
        <div class="page-common-content">
            <a-divider orientation="left"><span class="text-bold">{{ $ct("generalCheck", "普通校验") }}</span></a-divider>
            <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-model-item ref="name" label="输入框" prop="name">
                    <a-input v-model="form.name" @blur="() => { $refs.name.onFieldBlur(); }" placeholder="请输入" />
                </a-form-model-item>
                <a-form-model-item label="下拉选择" prop="region">
                    <a-select v-model="form.region" placeholder="请选择">
                        <a-select-option value="shanghai">
                            北方
                        </a-select-option>
                        <a-select-option value="beijing">
                            南方
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="时间选择" required prop="date1">
                    <a-date-picker v-model="form.date1" show-time type="date" placeholder="选择时间" style="width: 100%;" />
                </a-form-model-item>
                <a-form-model-item label="switch开关" prop="delivery">
                    <a-switch v-model="form.delivery" />
                </a-form-model-item>
                <a-form-model-item label="多选框" prop="type">
                    <a-checkbox-group v-model="form.type">
                        <a-checkbox value="1" name="type">
                            one
                        </a-checkbox>
                        <a-checkbox value="2" name="type">
                            two
                        </a-checkbox>
                        <a-checkbox value="3" name="type">
                            three
                        </a-checkbox>
                    </a-checkbox-group>
                </a-form-model-item>
                <a-form-model-item label="单选框" prop="resource">
                    <a-radio-group v-model="form.resource">
                        <a-radio value="1">
                            one
                        </a-radio>
                        <a-radio value="2">
                            two
                        </a-radio>
                    </a-radio-group>
                </a-form-model-item>
                <a-form-model-item label="文本输入框" prop="desc">
                    <a-input v-model="form.desc" type="textarea" />
                </a-form-model-item>
                <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" @click="onSubmit">
                        提交校验
                    </a-button>
                    <a-button style="margin-left: 10px;" @click="resetForm"><a-icon type="sync" />
                        重置表单
                    </a-button>
                </a-form-model-item>
            </a-form-model>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            other: '',
            form: {
                name: '',
                region: undefined,
                date1: undefined,
                delivery: false,
                type: [],
                resource: '',
                desc: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入内容', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度应为3-5个字', trigger: 'blur' },
                ],
                region: [{ required: true, message: '请选择区域', trigger: 'change' }],
                date1: [{ required: true, message: '请选择时间', trigger: 'change' }],
                type: [
                    {
                        type: 'array',
                        required: true,
                        message: '请选择一个类型',
                        trigger: 'change',
                    },
                ],
                resource: [
                    { required: true, message: '请选择', trigger: 'change' },
                ],
                desc: [{ required: true, message: '文本输入框不能为空', trigger: 'blur' }],
            },
        };
    },
    methods: {
        onSubmit() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs.ruleForm.resetFields();
        },
    },
};
</script>
